<template>
    <a-render>
        <!-- <template #leftheader>
            <div class="dis-flex flex-align-center">
                <h2 class="render-hedaer-title">{{ detailed?.library_name }}</h2>
                <Tag :type="libraryStatus.useDictItem(detailed?.borrowing_status)?.type">
                {{ libraryStatus.useDictItem(detailed?.borrowing_status)?.label }}
                </Tag>
            </div>
        </template> -->
        <template #rightheader>
            <a-space>
                <!-- <a-button type="primary" @click="openLibrary" v-if="buttonShow('open', detailed.borrowing_status)">开馆</a-button>
                <a-button type="primary" danger @click="closeLibrary" v-if="buttonShow('close', detailed.borrowing_status)">闭馆</a-button>
                <a-button type="link" danger @click="deleteLibrary" v-if="buttonShow('delete', detailed.borrowing_status)">删除</a-button> -->
            </a-space>
        </template>
    </a-render>
</template>
<script setup>
import { onActivated } from "vue"
import { useRouter, useRoute } from "vue-router"
// useDict
import { useDict } from "@/dict/index"
import { useBook } from "../use-book"
// 组件
import Tag from "@/components/tag/index.vue"
// router
const router = useRouter()
const route = useRoute()
// 藏馆状态
const libraryStatus = useDict('libraryStatusModules')
// hook
const { useBookDetailed } = useBook()


/**
 * 删除
 */
const deleteLibrary = () => useDeleteLibrary(detailed.value).then(() => router.replace('/cangguan'))

/**
 * 开馆
 */
const openLibrary = () => useOpenLibrary(detailed.value).then(() => useBookDetailed())

/**
 * 开馆
 */
const closeLibrary = () => useCloseLibrary(detailed.value).then(() => useBookDetailed())

/**
 * 按钮的显示状态
 */
 const buttonShow = (key, value) => libraryStatus.useDictItemStatus(key, value)

 onActivated(() => {
    console.log('route', route)
    useBookDetailed(route.params?.id).then(res => {
        console.log(111)
    })
 })
</script>